<template>
  <div class="loading-card-wrapper">
    <ul class="list">
      <li class="li1"></li>
      <li class="li2"></li>
      <li class="li3"></li>
    </ul>
  </div>
</template>

<script>
  export default {
    
  }
</script>

<style lang="less" scoped>
@w: var(--loadingCardWidth);
@h: var(--loadingCardHeight);

.loading-card-wrapper {
  box-sizing: border-box;
  width: @w;
  height: @h;

  padding-left: calc(@w * 0.05);

  .list {
    box-sizing: border-box;
    height: @h;
    --lh: calc(@h * 0.15);

    display: flex;
    flex-direction: column;
    justify-content: space-around;

    li {
      height: var(--lh);

      background-image: linear-gradient(to right, #83a4d4 0%, #b6fbff  51%, #83a4d4  100%);
      background-size: 200% auto;

      animation: 1s ease-in infinite alternate loading;

      &.li1 {
        width: calc(@w * 0.3);
      }

      &.li2 {
        width: calc(@w * 0.7);
      }

      &.li3 {
        width: calc(@w * 0.45);
      }
    }
  }

  @keyframes loading {
    from {
      background-position: left center;
    }
    to {
      background-position: right center;
    }
  }
}
</style>